<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 外形修饰（outline-offset ）</title>
    <style>
        /* outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 */

        /* 轮廓与边框有两点不同： */
        /* 轮廓不占用空间 */
        /* 轮廓可能是非矩形 */


        /* 规定边框边缘之外 15 像素处的轮廓： */
        div {
            margin: 20px;
            width: 150px;
            padding: 10px;
            height: 70px;
            border: 2px solid black;
            outline: 2px solid red;
            outline-offset: 15px;
        }
    </style>
</head>

<body>

    <p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>

    <div>这个 div有一个轮廓边界15 px边境外的边缘。</div>

</body>

</html>